<template>
  <view class="container p-b-80">
    <view class="statusInfo" v-if="orderDetail.order_status == 0">
      <view class="font-44 text-bold color-title2">待付款</view>
      <!-- <view class="flex-y-center daojishi" >
        <text class="color-title2 m-r-10">剩余支付时间 </text>
        <u-count-down :time="orderDetail.timestamp * 1000" format="HH:mm:ss"></u-count-down>
      </view> -->
      <image :src="$util.img('image/status_icon.png')" mode=""></image>
    </view>
    <view class="statusInfo" v-else-if="orderDetail.order_status == 1">
      <view class="font-44 text-bold" style="color: #fe6a00">待发货</view>
      <view class="c-8d">订单待发货，请耐心等待</view>
      <image :src="$util.img('image/status_icon2.png')" mode=""></image>
    </view>
    <view class="statusInfo" v-else-if="orderDetail.order_status == 3 || orderDetail.order_status == 2">
      <view class="font-44 text-bold" style="color: #00c28b">{{ orderDetail.order_status_name }}</view>
      <view class="c-8d" v-if="orderDetail.order_status == 3">订单已发货，请等待签收</view>
      <view class="c-8d" v-else>等待提货</view>
      <image :src="$util.img('image/status_icon3.png')" mode=""></image>
    </view>
    <view class="statusInfo" v-else-if="orderDetail.order_status == 4">
      <view class="font-44 text-bold">已完成</view>
      <view class="c-8d">当前订单已完成，谢谢惠顾</view>
      <image :src="$util.img('image/status_icon4.png')" mode=""></image>
    </view>
    <view class="statusInfo" v-else-if="orderDetail.order_status == -1">
      <view class="font-44 text-bold">{{ orderDetail.order_status_name }}</view>
      <view class="c-8d">当前订单已关闭</view>
      <image :src="$util.img('image/status_icon5.png')" mode=""></image>
    </view>
    <!-- <view class="statusInfo" v-else>
      <view class="font-44 text-bold" style="color:#FF3030;">{{orderDetail.order_status_name}}</view>
      <view class="c-8d">审核通过后，金额原路返回</view>
      <image :src="$util.img('/image/status_refund.png')" mode=""></image>
    </view> -->

    <view
      class="boxPanel"
      v-if="orderDetail.order_status !== 0 && orderDetail.order_status !== -1 && orderDetail.order_type == 2"
    >
      <view class="text-bold m-b-30 flex-center">订单码</view>
      <view class="flex-center">
        <text
          class="nums"
          :class="{ nums_dis: orderDetail.order_status == 10 }"
          v-for="(num, index) in pickupCodeArray"
          :key="index"
          >{{ num }}</text
        >
      </view>
    </view>

    <view class="boxPanel" v-if="orderDetail.order_type == 2">
      <view class="flex-y-center m-b-14">
        <text class="font-30 text-bold">{{ orderDetail.delivery_store_name }}</text>
        <u-icon name="arrow-right" size="16" color="#1C274C"></u-icon>
      </view>
      <view class="flex-x-between m-b-20" style="align-items: baseline">
        <!-- style="width:62%;" -->
        <view class="c-60 font-26">
          {{ orderDetail.delivery_store_info.full_address }}
        </view>
        <!-- <view class="flex-y-center">
          <u-icon name="map" color="#8D93A5" size="14"></u-icon>
          <text class="c-60 font-26 m-l-6">距您{{orderDetail.distance}}km</text>
        </view> -->
      </view>
    </view>

    <view class="addressEmpty boxPanel" v-if="orderDetail.order_type == 1">
      <image :src="$util.img('/image/map.png')" mode="" class="mapimg"></image>
      <view style="width: 80%">
        <view class="font-30 text-bold">{{ orderDetail.name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ orderDetail.mobile }}</view>
        <view class="c-74 font-weight-5 address"> {{ orderDetail.full_address }}{{ orderDetail.address }} </view>
      </view>
    </view>

    <view class="boxPanel p-20 m-l-24 m-r-24 m-b-24">
      <view class="goodsInfo" v-for="item in orderDetail.order_goods" :key="item.order_goods_id">
        <image :src="$util.img(item.sku_image)" mode="aspectFill" :lazy-load="true"></image>
        <view class="right">
          <view class="name ellipsis-2">{{ item.sku_name }}</view>
          <view
            class="font-32 flex-x-between"
            v-if="orderDetail.order_status_name == '待付款' || orderDetail.order_status_name == '已关闭'"
          >
            <text class="c-78">x{{ item.num }}</text>
            <text>¥{{ item.price }}</text>
          </view>
          <view class="flex-between" v-else>
            <view class="c-78">¥{{ item.price }} &nbsp;&nbsp;x{{ item.num }}</view>
            <block v-if="orderDetail.is_enable_refund">
              <view
                class="refund_com"
                @click="applyRefund(item)"
                v-if="item.refund_status == 0 || item.refund_status == -1"
                >申请退款</view
              >
            </block>
            <view
              class="refund_com"
              @click="refundDetail(item)"
              v-if="item.refund_status != 0 && item.refund_status != -1"
              >查看售后</view
            >
          </view>
        </view>
      </view>
      <view class="flex-x-between m-t-20">
        <view class="c-60">共计 {{ orderDetail.goods_num }} 件商品</view>
        <view class="c-60 flex-y-baseline">
          合计金额
          <view class="c-origin text-bold font-26 flex-y-baseline"
            ><text class="font-24">￥</text>{{ orderDetail.order_money }}</view
          >
        </view>
      </view>
    </view>

    <view class="boxPanel m-l-24 m-r-24 m-b-24 radius-20 p-20">
      <view class="flex-between m-t-22">
        <view class="c-78">订单编号</view>
        <view class="flex-y-center">
          {{ orderDetail.order_no }}
          <text class="color-title2 m-l-10" @click="copyTxt(orderDetail.order_no)">复制</text>
        </view>
      </view>
      <view class="flex-between m-t-22">
        <view class="c-78">创建时间</view>
        <view class="flex-y-center">
          {{ $util.timeStampTurnTime(orderDetail.create_time) }}
        </view>
      </view>
      <view class="flex-between m-t-22" v-if="orderDetail.close_time > 0">
        <view class="c-78">关闭时间</view>
        <view class="flex-y-center">
          {{ $util.timeStampTurnTime(orderDetail.close_time) }}
        </view>
      </view>
      <view class="flex-between m-t-22" v-if="orderDetail.pay_status > 0">
        <view class="c-78">支付方式</view>
        <view class="flex-y-center">
          {{ orderDetail.pay_type_name }}
        </view>
      </view>
      <view class="flex-between m-t-22" v-if="orderDetail.pay_status > 0">
        <view class="c-78">支付时间</view>
        <view class="flex-y-center">
          {{ $util.timeStampTurnTime(orderDetail.pay_time) }}
        </view>
      </view>
      <view class="flex-between m-t-22">
        <view class="c-78">订单备注</view>
        <view class="flex-y-center">
          {{ orderDetail.buyer_message }}
        </view>
      </view>
      <view class="flex-between m-t-22" v-if="orderDetail.delivery_type_name">
        <view class="c-78">配送方式</view>
        <view class="flex-y-center">
          {{ orderDetail.delivery_type_name == "物流配送" ? "快递" : "自提" }}
        </view>
      </view>
      <view class="flex-between m-t-22" v-if="orderDetail.coupon_money > 0">
        <view class="c-78">优惠券</view>
        <view class="flex-y-center c-origin text-bold"> -￥{{ orderDetail.coupon_money }} </view>
      </view>
      <view class="flex-between m-t-22" v-if="orderDetail.promotion_type_name != ''">
        <view class="c-78">活动优惠</view>
        <view class="flex-y-center">
          {{ orderDetail.promotion_type_name }}
        </view>
      </view>
      <view class="flex-between m-t-22" v-if="orderDetail.pay_status > 0">
        <view class="c-78">付款金额</view>
        <view class="flex-y-center"> ¥{{ orderDetail.pay_money }} </view>
      </view>
    </view>
  </view>
</template>

<script>
// 待支付0   待发货1 已发货3 已收货4 已结算完成 10   已关闭-1
import orderUtils from "../js/orderUtils.js";
export default {
  data() {
    return {
      orderDetail: {},
      order_id: 0,
      // 添加取件码数组
      pickupCodeArray: [],
    };
  },
  mixins: [orderUtils],
  onLoad(e) {
    this.order_id = e.order_id || 0;
  },
  onShow() {
    this.getOrderDetail();
  },
  methods: {
    refundDetail(item) {
      this.$util.redirectTo("/pages/refundOrderDetail/refundOrderDetail?order_goods_id=" + item.order_goods_id);
    },
    applyRefund(item) {
      this.$util.redirectTo("/pages/refund/refund?order_goods_id=" + item.order_goods_id);
    },
    getOrderDetail() {
      this.$api.sendRequest({
        url: "/api/order/detail",
        data: {
          order_id: this.order_id,
        },
        success: (res) => {
          if (res.code == 0) {
            this.orderDetail = res.data;
            if (this.orderDetail.delivery_store_info != "")
              this.orderDetail.delivery_store_info = JSON.parse(this.orderDetail.delivery_store_info);

            // 处理取件码，假设取件码字段为pickup_code
            if (this.orderDetail.delivery_code) {
              // 将取件码拆分为单个数字数组
              this.pickupCodeArray = this.orderDetail.delivery_code.toString().split("");
            } else {
              this.pickupCodeArray = [];
            }
            // console.log(this.pickupCodeArray);
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    copyTxt(order_no) {
      this.$util.copy(order_no);
    },
  },
};
</script>

<style lang="scss" scoped>
.statusInfo {
  position: relative;
  background: #fff;
  padding: 50rpx 30rpx;
  border-radius: 0 0 20rpx 20rpx;
  image {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 274rpx;
    height: 200rpx;
  }
}
.addressEmpty {
  display: flex;
  .address {
    padding-bottom: 20rpx;
  }
}
.goodsInfo {
  display: flex;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f3f4f5;
  image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
  }
  .right {
    width: 70%;
    .name {
      height: 78rpx;
      line-height: 1.4;
      margin-bottom: 20rpx;
    }
  }
}

.zengBox {
  background: linear-gradient(180deg, #ffdcdc 0%, #fff 31.69%);
  .zengimg {
    position: absolute;
    top: 0;
    right: 0;
    width: 189rpx;
    height: 252rpx;
  }
}

.quanimg {
  width: 32rpx;
  height: 30rpx;
}

.refund_com {
  width: 140rpx;
  height: 52rpx;
  line-height: 52rpx;
  border-radius: 20rpx;
  text-align: center;
  font-size: 24rpx;
  color: #606882;
  border: 1px solid #b8bac2;
  background-color: #fff;
  box-sizing: border-box;
}

.mapimg {
  width: 80rpx;
  height: 80rpx;
  flex-shrink: 0;
  margin-right: 24rpx;
}

.nums {
  display: inline-block;
  width: 67rpx;
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;
  border-radius: 20rpx;
  background: #f7f7f7;
  color: $color-title2;
  font-size: 52rpx;
  font-weight: bold;
  margin-right: 14rpx;
}
.nums_dis {
  color: #cfd0d4 !important;
}
</style>
